<template>
  <div class="container" >
      <!-- 文章区域 -->
        <div class="main">
              <!-- 文章简介区域 -->
        <!-- <div class="introduction">

        </div> -->

        <!-- 章节区域 -->
        <div class="chapter">
          <!-- 最新章节区域 -->
            <div class="newchapter">
              <dl >
                <dt  v-show="name">《{{name}}》最新章节</dt>
                <dd v-for="(item,index) in newestList" :key="index">
                  <a @click="jump(item.href)">{{item.name}}</a>
                </dd>
              </dl>
            </div>

          <!-- 章节正文区域 -->
            <div class="startchapter">
              <dl >
                <dt v-show="name">《{{name}}》正文</dt>
                <dd @click="jumpFn(item.href)" v-for="(item,index) in chapterList" :key="index">
                  <!-- <a :href="item.href">{{item.name}}</a> -->
                  <a>{{item.name}}</a>

                </dd>
              </dl>

            </div>
        </div>

        </div>
  </div>
</template>
<script>
export default {
  name: 'ChaPter',
  data () {
    return {
      // 章节列表数据
      chapterList: [],
      // 最新章节区域
      newestList: [],
      name: '' // 小说的名称
    }
  },
  async created () {
    // 请求小说章节数据
    const res = await this.$API.reqGetChapter({ url: this.$route.params.id })
    // 将最新的章节截取出来，放到最上面
    this.newestList = res.data.splice(0, 9)
    this.chapterList = res.data
    this.name = this.$store.state.home.name

    // 触发SETCHAPTERLIST函数，并将数据传递进去 切割数组
    this.$store.commit('SETCHAPTERLIST', res.data)
  },
  methods: {
    jumpFn (item) {
      // 切割章节id
      const chapterUrl = item.slice(-13, -5)
      // const chapterUrl = a.slice(0, 8)
      // 跳转到内容页面，并将小说id和内容id通过路由传过去
      this.$router.push({
        name: 'content',
        params: {
          id: this.$route.params.id,
          url: chapterUrl
        }
      })
    },
    jump (item) {
      // 切割章节id
      const chapterUrl = item.slice(-13, -5)
      // const chapterUrl = a.slice(0, 8)
      // 跳转到内容页面，并将小说id和内容id通过路由传过去
      this.$router.push({
        name: 'content',
        params: {
          id: this.$route.params.id,
          url: chapterUrl
        }
      })
    }
  }

}
</script>
<style lang="less" scoped>
.main{
  padding-top: 30px;
}
a{
  cursor: pointer;
}
// 小说简介区域
.introduction{
  width: 100%;
  height: 60px;
  border: 2px solid #409eff;
  margin-bottom: 15px;
}
// 章节区域
.chapter{
  background-color: #E9FAFF;
  // padding: 10px;
//  width: 100%;
  // height: 60px;
  border: 2px solid #409eff;
  // css-外面元素的高度，由里面的元素进行撑开（由内部的高度决定）
  /*
  1.删除你的高度的固定值

  2.将父元素的====>display:inline-block;

   或者设置浮动====>float:left; */

  // float: left;
  width: 100%;
  display: inline-block;

// 最新章节区域样式
  .newchapter{
  // border: 2px solid red;
  width: 100%;
  float: left;
//  标题样式
 dt{
    background: none repeat scroll 0 0 #C3DFEA ;
    text-align: center;
      // background-color: skyblue;
    line-height: 50px;
    height: 50px;
  }
//  章节样式
 dd{
  cursor: pointer;
  height: 30px;
    line-height: 200%;
  text-indent:10px;
    float: left;
    width: 33%;
    text-align: left;
  }
a{
  color: #6F78A7;
}
  }

// 章节正文样式
  .startchapter{
    //  border: 2px solid skyblue;
  width: 100%;
  float: left;
  // margin-top: 20px;
  dt{
   background: none repeat scroll 0 0 #C3DFEA ;
    line-height: 50px;
    height: 50px;
    text-align: center;
  }
  dd{
    height: 30px;
    line-height: 200%;
    text-indent:10px;
    float: left;
    width: 33%;
    text-align: left;
  }
  a{
    color: #6F78A7;
  }
  }

}
</style>
